<template>
  <div class="left" ref="leftbox">
  <ul class="left-item" >
    <li  v-for="item in data " :key="item" @click="onClick(item)" :class="{ active: cateItem.titleName === item }" :id="item">{{
      item }}</li>
  </ul>
  </div>
  <div class="right">
        <div class="right-item" v-for="item in list" :key="item.keywordid">
          <h5>{{ item.keyword}}</h5>
          <van-grid :column-num="3" :border="false" :icon-size="60" :gutter="12" >
            <van-grid-item v-for="value in item.level2words" :key="value.keywordId"    :icon="value.imageUrl" :text="value.keyword" />
            
          </van-grid>
        </div>
      
      </div>
</template>

<script lang="ts" setup>
const Props= defineProps(["data",'list','titels'])
const leftbox=ref<HTMLElement>()

const cateItem = reactive({
  titleName:'食品' 
})
const length =computed(()=>{

})
defineExpose({
     cateItem
})

function onClick(name:any) {
  cateItem.titleName = name 
  const Li=document.querySelector(`#${name}`)
  // @ts-ignore
  const offsetTop=Li.offsetTop
//@ts-ignore
leftbox.value.scrollTop=offsetTop

}
// const emit =defineEmits(['cateItem',cateItem.titleName])

</script>

<style scoped>
.left {
transition-delay: 2s;
  width: 79px;
  overflow-y: auto;
 
}

.left-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
  background-color: #f8f8f8;
  flex-shrink: 0;
  position: relative;
  text-decoration: none;
  transition-delay: 2s;
}

.left-item>li {
  width: 100%;
  height: 46px;
  line-height: 46px;
  font-size: 14px;
  text-align: center; 
  flex-shrink: 0;
 
}
.right {
  flex: 1;
  overflow-y: auto;
  padding: 15px 10px;
}

h5 {
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.right-item {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.active {
  color: red;
  background-color: #fff;
  top: 0;
}
</style>